import Taro, { Component } from '@tarojs/taro'
import { View, Text} from '@tarojs/components'
import { DNavBar, DImagesupload } from '@/components'
import { AtButton, AtList,AtListItem } from 'taro-ui'
import './caruploadtran.scss'
import http from '@/api'
export default class CaruploadinfoBox extends Component {

    constructor(props) {
        super(props)
        this.state = {
            list: [],
            firstList: [],
            secondList: [],
            threeList: [],
			bankInfo:{},
            fourList: []
        }
    }
	componentDidShow(){
			 this.getChooiseBankCode()
	}
	getChooiseBankCode(){
			 let loc = JSON.parse(localStorage.getItem('chooiseBankList'))
	    if(loc){
			  let chooiseBankCode = loc.cardNumber+' '+loc.belongToBank
	      this.setState({
				   chooiseBankCode,
				   bankInfo:{bankName:loc.belongToBank ,//银行名称
	         bankNo:loc.cardNumber	,//string
	        bankUserName:loc.cardholderName}
			   })
			 }
	}
	onChangeChooiseBank(){
		Taro.navigateTo({
			url:'/pages/userbank/userbank?ty=1'
		})
	}
    componentWillMount() {
        let { id, orNo } = this.$router.params
        this.setState({
            refOtNo: orNo,
            refOtId: id
        })
    }
    uploadPactPhoto() {
        let { firstList, secondList, threeList, fourList } = this.state
        // console.log(firstList,secondList)
        let orderTransCarFileList = [...firstList, ...secondList, ...threeList, ...fourList]
        if (firstList.length === 0) {
            return this.tipShowTaost('请上传车辆运输合同照片！')
        }
        if (secondList.length === 0) {
            return this.tipShowTaost('请上传车辆交接凭证！')
        }
		if(!this.state.bankInfo.bankNo){
			return this.tipShowTaost('请选择银行卡！')
		}
        let obj = {
            files: orderTransCarFileList,
			...this.state.bankInfo
        }
        http.uploadPactPhoto(obj).then(res => {
            let { refOtId } = this.state
            Taro.showToast({
                title: '提交成功',
                duration: 800,
                mask: true
            }).then(() => {
                setTimeout(() => {
                    Taro.redirectTo({
                        // url: `/pages/itemdetail/itemorder?id=${refOtId}&status=42`
                        url: `/pages/shiporder/shiporder?active=2`
                    })
                }, 1000)
            })
        })
    }

    tipShowTaost(title) {
        return Taro.showToast({
            title,
            icon: 'none'
        })
    }

    onChangeFirst(item) {
        let { refOtId, refOtNo } = this.state
        let firstList = []
        item.map(item => {
            firstList.push({
                "otfId": `${item.id}`,
                "otfName": "",
                "otfType": 6,
                "otfUrl": `${item.url}`,
                "refOtId": `${refOtId}`,
                "refOtNo": `${refOtNo}`
            })
        })
        this.setState({
            firstList
        })
    }
    onChangeSecond(item) {
        let { refOtId, refOtNo } = this.state
        let secondList = []
        item.map(item => {
            secondList.push({
                "otfId": `${item.id}`,
                "otfName": "",
                "otfType": 7,
                "otfUrl": `${item.url}`,
                "refOtId": `${refOtId}`,
                "refOtNo": `${refOtNo}`
            })
        })
        this.setState({
            secondList
        })
    }

    onChangeThree(item) {
        let { refOtId, refOtNo } = this.state
        let threeList = []
        item.map(item => {
            threeList.push({
                "otfId": `${item.id}`,
                "otfName": "",
                "otfType": 8,
                "otfUrl": `${item.url}`,
                "refOtId": `${refOtId}`,
                "refOtNo": `${refOtNo}`
            })
        })
        this.setState({
            threeList
        })
    }
    onHandleImage = (status = '') => {
        Taro.navigateTo({
            url: `/pages/itemImages/itemImages?status=${status}`
        })
    }
    onHandleSubmit() {
        this.uploadPactPhoto()
    }
    render() {
        const itemImagesHtml1 =
            <View className='b_caruploadtran__images_enterpris'>
                <View className='item_title'>
                    <Text className='item_title__left'>车辆运输合同</Text>
                    <Text className='item_title__dec'>（如有多页面按顺序上传）</Text>
                    <Text className='item_title__right' onClick={this.onHandleImage.bind(this, 'yunshu')}>查看范例</Text>
                </View>
                <View className="item_images__box">
                    <DImagesupload count={8} onChangeImages={this.onChangeFirst.bind(this)}></DImagesupload>
                </View>
            </View>
        const itemImagesHtml2 =
            <View className='b_caruploadtran__images_enterpris'>
                <View className='item_title'>
                    <Text className='item_title__left'>车辆交接凭证</Text>
                    <Text className='item_title__dec'>（如有多页面按顺序上传）</Text>
                    <Text className='item_title__right' onClick={this.onHandleImage.bind(this, 'chejiao')}>查看范例</Text>
                </View>
                <DImagesupload count={8} onChangeImages={this.onChangeSecond.bind(this)}></DImagesupload>
            </View>

        const itemImagesHtml3 =
            <View className='b_caruploadtran__images_enterpris'>
			<AtList>
			  <AtListItem  iconInfo={{ size: 20, color: '#FF4949', value: 'star_', }} title='请选择银行卡' onClick={this.onChangeChooiseBank.bind(this)} note={this.state.chooiseBankCode} arrow='right' >

			  </AtListItem>
			</AtList>
                <View className='item_title'>
                    <Text className='item_title__left'>其他</Text>
                    <Text className='item_title__dec'>（如有补充凭证，请上传）</Text>
                </View>
                <DImagesupload count={8} onChangeImages={this.onChangeThree.bind(this)}></DImagesupload>
            </View>
        return (
            <View className='b_caruploadtran'>
                <DNavBar title='上传资料'></DNavBar>
                <View className='b_caruploadtran__box'>
                    <View className='b_caruploadtran__images'>
                        <View className='b_caruploadtran__images_title'>请上传以下资料</View>
                        {/* {itemPeople} */}
                        <View className="b_caruploadtran__images_item">
                            {itemImagesHtml1}
                        </View>
                        <View className="b_caruploadtran__images_item">
                            {itemImagesHtml2}
                        </View>
                        <View className="b_caruploadtran__images_item">
                            {itemImagesHtml3}
                        </View>
                    </View>
                    <View className='b_caruploadtran__footer'>
                        <AtButton className='item_btn' onClick={this.onHandleSubmit.bind(this)}>提交</AtButton>
                    </View>
                </View>
            </View>
        )
    }
}
